import React, { useState, useEffect } from 'react';
import services from '../../../services/api';
import { Button, Table, Tooltip } from 'antd';
import { APIUrl } from '../../../services/createServices'

export default function CaseTrace(props) {
  const [isFile, setIsFile] = useState(0) // 是否有附件
  const [data, setData] = useState([]);
  const [page, setPage] = useState({
    currentPage: 1,
    pageSize: props.pageSize || 10,
    totalCount: 0
  })

  useEffect(() => {
    if (props.case_node_id) {
      if (page.currentPage === 1) {
        caseTrace(page);
      } else {
        setPage({
          currentPage: 1,
          pageSize: props.pageSize || 10,
          totalCount: 0
        })
      }
    }
  }, [props.case_node_id]);
  
  useEffect(() => {
    caseTrace(page);
  }, [page.currentPage]);

  function caseTrace(page) {
    let params = {
      case_id: props.id,
      current_page: page.currentPage,
      page_size: page.pageSize
    }
    services.caseTask.caseTrace(params).then(res => {
      if (res.code === 0) {
        setData(res.data.list);
        setIsFile(res.data.is_file)
        setPage({ ...page, totalCount: res.data.totalCount })
      }
    });
  }

  function pageChange(value) {
    setPage({ ...page, currentPage: value })
  }

  function download(case_id, case_node_id) {
    // services.caseTask.download({ case_id, case_node_id }).then(res => {
    //   if (res.code === 0) {
    //     let a = document.createElement('a');
    //     a.href = res.data;
    //     a.click();
    //   }
    // })
    var a = document.createElement('a');
    let url = getParamsUrl(`${APIUrl}/case-task/get-file-url`, { case_id, case_node_id })
    a.href = url;
    a.click();
  }

  // 下载
  function downloadAll(case_id) {
    var a = document.createElement('a');
    let url = getParamsUrl(`${APIUrl}/case-task/batch-download`, { case_id })
    a.href = url;
    a.click();
  }

  // 处理get 参数
  function getParamsUrl(url, params) {
    if (Object.keys(params).length !== 0) {
      let str = '';
      for (const key in params) {
        str = str !== '' ? `${str}&${key}=${params[key]}` : `${key}=${params[key]}`;
      }
      return `${url}?${str}`;
    } else {
      return url;
    }
  }

  const columns = [
    {
      key: 'create_user_name',
      dataIndex: 'create_user_name',
      title: '分配人',
      ellipsis: true,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      }
    },
    {
      key: 'accepter_user_name',
      dataIndex: 'accepter_user_name',
      title: '处理人',
      ellipsis: true,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      }
    },
    {
      key: 'check_remark',
      dataIndex: 'check_remark',
      title: '审核意见',
      ellipsis: true,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      }
    },
    {
      key: 'file_url',
      title: '附件',
      render: (text, record) => (
        record.file_url ? <Button type='link' onClick={download.bind(this, record.case_id, record.case_node_id)}>附件</Button> : '')
    },
    {
      key: 'accepter_deal_time',
      dataIndex: 'accepter_deal_time',
      title: '处理时间',
      ellipsis: true,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      }
    }
  ];
  return (
    <div className='tantuer' style={{ textAlign: 'right' }}>
      {isFile === 1 && <Button type='link' onClick={downloadAll.bind(this, props.id)}>下载全部附件</Button>}
      <Table columns={columns} dataSource={data} rowKey='case_node_id' pagination={{
        showQuickJumper: true,
        current: page.currentPage,
        pageSize: page.pageSize,
        total: page.totalCount,
        showTotal: (total) => `总共 ${page.totalCount} 条`,
        onChange: pageChange.bind(this),
        style: { textAlign: 'right' }
      }} className='fixed' />
    </div>
  );
}
